<template>
	<view>
		<uni-nav-bar fixed="true" @clickLeft="back" backgroundColor="#6869a8" height="120rpx" statusBar="true">
			<view style="font-size: 37rpx; margin: auto;">
				<text style="color: #FFF;">群通知</text>
			</view>
			<view slot="left">
				<uni-icons type="back" size="30" color="#FFF"></uni-icons>
			</view>
		</uni-nav-bar>
		<uni-list>
			<uni-list-item v-for="(item,index) in groupRequest" :key="index">
				<template v-slot:header>
					<view>
						<image :src="item.user.avatar" mode="aspectFill" @click="watchUser(item.user.id)"
							style="width: 80rpx;height: 80rpx;border-radius: 15rpx;"></image>
					</view>
					<view>
						<text class="username" @click="watchUser(item.user.id)">{{item.user.username}}</text>
						<br />
						<text class="message">申请加入: {{item.group.groupName}}</text>
						<br />
						<text class="message">验证消息: {{item.message}}</text>
					</view>
				</template>
				<template v-slot:footer>
					<view class="hint">
						<view class="button-accept" @click="accept(item,index)" hover-class="button-accept-click">同意
						</view>
						<view class="button-refuse" @click="reject(item,index)" hover-class="button-refuse-click">拒绝
						</view>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
		<view class="tip" v-if="groupRequest.length==0">
			没有新的群通知~~
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				groupRequest: [],
			}
		},
		mounted() {
			this.$request.TokenRequest({
				url: "/group/getUnDealRequest"
			}, {}).then(res => {
				if (res.state === 200) {
					this.groupRequest = res.data
				}
			})
		},
		methods: {
			back() {
				uni.navigateBack({})
			},
			watchUser(id) {
				uni.navigateTo({
					url: '../informationPage/informationPage?id=' + id,
					fail(e) {
						console.log(e)
					}
				})
			},
			accept(item, index) {
				delete item.group
				delete item.user
				this.$request.TokenRequest({
					url: "/group/accept"
				}, item).then(res => {
					if (res.state === 200) {
						uni.showToast({
							title: "已通过",
							icon: 'none'
						})
						this.groupRequest.splice(index, 1)
						this.$store.commit("subGrouopRequestNum")
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
				})
			},
			reject(item, index) {
				this.$request.TokenRequest({
					url: "/group/reject"
				}, {
					id: item.id
				}).then(res => {
					if (res.state === 200) {
						uni.showToast({
							title: "已拒绝",
							icon: 'none'
						})
						this.groupRequest.splice(index, 1)
						this.$store.commit("subGrouopRequestNum")
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.username {
		display: inline-block;
		margin: auto 15rpx;
		font-size: 35rpx;
		max-width: 240rpx;
		overflow-y: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.id {
		font-size: 30rpx;
		color: #858786;
	}

	.message {
		margin: auto 15rpx;
		font-size: 27rpx;
		color: #858786;
	}

	.hint {
		margin: auto 0;
		font-size: 30rpx;
		color: #858786;
		display: flex;
	}

	.button-accept {
		color: white;
		background-color: #8b8de1;
		font-size: 30rpx;
		margin: 0 10rpx;
		padding: 8rpx 23rpx;
		border: #8b8de1 2rpx solid;
		border-radius: 10rpx;
	}

	.button-refuse {
		color: #000000;
		font-size: 30rpx;
		margin: 0 10rpx;
		padding: 8rpx 23rpx;
		border: #aaaaaa 2rpx solid;
		border-radius: 10rpx;
	}

	.button-accept-click {
		background-color: #6869a8;
	}

	.button-refuse-click {
		background-color: #F5F5F5;
	}

	.tip {
		font-size: 30rpx;
		color: #858786;
		text-align: center;
		padding: 40rpx 0;
	}
</style>
